import echarts, { ECharts } from 'echarts'

export class EChartsBase {
  _instance = {}
  _width = 0
  _height = 0
  click = function () {
    
  }

  // 获取实例对象
  get instance() {
    return this._instance
  }

  // 获取宽度
  get width() {
    return this._width
  }

  // 获取长度
  get height() {
    return this._height
  }

  // 是否加载中
  set loading(value) {
    if (value) {
      this.instance.showLoading('default', {
        text: '努力加载中...',
        maskColor: '#333333',
        textColor: '#fff'
      })
    } else {
      this.instance.hideLoading()
    }
  }

  constructor($el) {
    this.init($el)
  }

  // 初始化
  init($el) {
    this._instance = echarts.init($el)
    window.onresize = () => {
      this.instance.resize()
      this._width = this.instance.getWidth()
      this._height = this.instance.getHeight()
    }
    (this.instance).getZr().on('click', (params) => {
      const pointInPixel = [params.offsetX, params.offsetY]
      if (this.click && (this.instance).containPixel({ gridIndex: [0, 1] }, pointInPixel)) {
        const xIndex = this.instance.convertFromPixel({ seriesIndex: 0 }, [
          params.offsetX,
          params.offsetY
        ])[0]
        this.click(xIndex)
      }
    });
    (this.instance).getZr().on('mousemove', (params) => {
      // 获取总宽度
      const width = $el.offsetWidth
      // 将宽度分为3大块
      const boxWidth = width / 3
      // 获取当前鼠标的x轴位置
      const layerX = params.event.layerX
      if (layerX > 2 * boxWidth) {
        // console.log('right')
      } else if (layerX > boxWidth) {
        // console.log('center')
      } else {
        // console.log('left')
      }
    })
    this._width = this.instance.getWidth()
    this._height = this.instance.getHeight()
  }

  // 重置大小
  resize() {
    this.instance.resize()
    this._width = this.instance.getWidth()
    this._height = this.instance.getHeight()
  }

  // 设置属性
  setOption(options) {
    this.instance.setOption(options)
  }
}
